<!--created by Chuanpeng.zhu@dhc.com.cn-->
<ion-view view-title="页面生成器">
  <ion-content>
    <div class="padding">
      <h3>说明</h3>
      <p>
        我们在用ionic的时候，每当创建一个新的页面，一般来说需要执行4个步骤
        例如我们创建一个personal页面的时候：
      </p>
      <ol style="list-style: decimal;padding-left: 40px">
        <li>在www/templates目录创建html模板文件Personal.html</li>
        <li>在www/js目录创建js文件Personal.js</li>
        <li>在www/index.html中引用Personal.js</li>
        <li>在路由中配置personal的状态</li>
      </ol>
      pagecreator.js这个gulp文件可以在设置了页面名称、路径后，自动执行4个步骤。
      <h3>导入步骤</h3>
      <p>打开WebStorm，打开左下角的gulp窗口，点击‘+’导入gulpScript/pagecreator.js文件。</p>
      <img ng-src="./img/gulp_add.bmp"  class="width-100" alt=""/>
      <p>成功导入后页面如下</p>
      <img ng-src="./img/gulp.jpg"  class="width-100" alt=""/>
      <p>按F4或者右键点击JumpToSrc进入代码</p>
      <img ng-src="./img/gulp_go_src.jpg"  class="width-100" alt=""/>
      <p>编辑YourPageName，YourDescribe后，运行default进程即可完成创建</p>
      <img ng-src="./img/gulp_code.jpg"  class="width-100" alt=""/>
      <p>创建完成后可以看到git中的代码变动</p>
      <img ng-src="./img/gulp_result.jpg" class="width-100" alt=""/>
      <p>提示：运行脚本前最好commit所有改动，以免覆盖代码。</p>
    </div>
  </ion-content>
</ion-view>
